<!-- 房屋管理 -->
<template>
  <div>
    <div class="header">
      <div class="title" style="height: 65px">
        <div style="margin-bottom: 5px; margin-top: 5px">
          <a-space style="margin-left: 13px">
            <span>行政区划：</span>
            <a-input-group compact>
              <a-cascader
                v-model:value="strXzqdm"
                style="width: 100%"
                :options="XzqdmList"
                expand-trigger="hover"
                placeholder="请选择行政区"
                changeOnSelect
              />
            </a-input-group>
          </a-space>
          <a-space style="margin-left: 10px">
            <span>开始时间：</span>
            <a-date-picker v-model:value="startDate" :format="dateFormat" :disabledDate="disabledFutureDate"  />
          </a-space>
          <a-space style="margin-left: 10px">
            <span>结束时间：</span>
            <a-date-picker v-model:value="endDate" :format="dateFormat"  :disabledDate="disabledFutureDate"  />
          </a-space>
          <a-space style="margin-top: 15px; margin-left: 25px">
            <span>核验来源：</span>
            <a-select ref="select" v-model:value="role_type" style="width: 120px">
              <a-select-option value="4">乡镇</a-select-option>
              <a-select-option value="3">区级</a-select-option>
              <a-select-option value="2">市级</a-select-option>
            </a-select>
          </a-space>
          <a-space style="margin-top: 15px; margin-left: 15px">
            <span>核验人员姓名：</span>
            <a-input
              v-model:value="nickname"
              placeholder="请输入核查人员姓名进行查询"
              style="width: 256px; margin-top: -10px"
            />
          </a-space>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <a-space class="search-btn">
            <a-button type="primary" @click="searchBtn">查询</a-button>
          </a-space>
        </div>
      </div>
      <a-table
        style="margin-top: 0px"
        :dataSource="tableData"
        :columns="displayColumns"
        :pagination="false"
        :scroll="{ x: 1500, y: tableHeight }"
        bordered
        :loading="loading"
      />
      <div class="pagination" style="float: right">
        <div style="float: left; line-height: 32px; padding-right: 12px">共{{ total }}条记录</div>
        <a-pagination
          show-size-changer
          show-total
          v-model:current="pageIndex"
          v-model:pageSize="pageSize"
          :total="total"
          style="float: right"
          @show-size-change="onShowSizeChange"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import moment from 'moment';
  import dayjs from 'dayjs';
  import { ref, reactive, toRefs, onMounted, onBeforeMount, computed,watch } from 'vue';
  import { getUserByList, getRegion } from '/@/api/demo/api'; //统计双通道满足情况
  import { useUserStore } from '/@/store/modules/user';
  import { useRouter } from 'vue-router';
  import { iTableData, iTableColumns } from './types/table';
  import { downloadByUrl } from '/@/utils/file/download';
  import { useGlobSetting } from '/@/hooks/setting';
  import { useCheckStore } from '/@/store/modules/checkStore';

    const disabledFutureDate = (current) => {
  return current && current > moment().endOf('day');
};

  let userInfo = ref<any>(null);
  const router = useRouter();
  const nickname = ref<string>(''); //核验人员姓名
  const role_type = ref<string>('3'); //关键字
  const floor = ref<string[]>([]); //层数
  const strXzqdm = ref<string[]>([]); //行政区
  const XzqdmList = ref<string[]>([]); //行政区
  let detailTableHeight = ref<number>(800); // 表格高度
  let tableHeight = ref<number>(0); // 表格高度
  const dateFormat = 'YYYY-MM-DD';
  const startDate = ref<any>(null); // 开始时间
  const endDate = ref<any>(null); // 结束时间
  const checked = ref(false);
  let pageIndex = ref(1);
  let pageSize = ref(100);
  let total = ref(0);
  const store = useCheckStore();
  const { startTime, endTime } = store.formData || {};
  let data = reactive<{
    tableData: iTableData[];
    tableColumns: iTableColumns[];
    wscolsList: { wch: number }[];
    id: number | any;
    loading: Boolean;
    keyWorld: String;
    currentqx: string; // 当前行政区名称
    currentTitle: string;

    cityToken: string | any;
    startTime: string;
    endTime: string;
  }>({
    // 表格数据
    tableData: [],
    tableColumns: [
      {
        title: '序号',
        dataIndex: 'index',
        key: 'index',
        align: 'center',
        width: 80,
      },
      {
        title: '企安安编号',
        dataIndex: 'qaakey',
        key: 'qaakey',
        align: 'center',
        width: 120,
      },
      {
        title: '人员姓名',
        dataIndex: 'nickname',
        key: 'nickname',
        align: 'center',
        width: 120,
      },
      {
        title: '单位名称',
        dataIndex: 'unitname',
        key: 'unitname',
        align: 'center',
        width: 120,
      },
      {
        title: '身份级别',
        dataIndex: 'role_type_name',
        key: 'role_type_name',
        align: 'center',
        width: 120,
      },
      {
        title: '归属区域',
        dataIndex: 'town_village',
        key: 'town_village',
        align: 'center',
        width: 120,
      },
      {
        title: '核查栋数',
        dataIndex: 'hccount',
        key: 'hccount',
        align: 'center',
        width: 100,
        customCell: (row, index, column) => {
          let isNoHzyh = row.xzq !== '汇总' ? true : false;
          let style = 'cursor:pointer;text-decoration: underline; color: blue;';
          let isNoZero = row[column.key] !== 0 ? true : false;
          return {
            style: `${isNoHzyh === true && isNoZero ? style : ''}`,
            class: 'cell-hover',
            onClick: async () => {
              getDetailData(row);
            },
          };
        },
      },
    ],
    id: null,
    loading: true,
    keyWorld: '',
    cityToken: '', // 判断是不是市区 110000 是北京市 展示搜索宽
    currentqx: '', // 当前行政区名称
    currentTitle: '', // 当前详情标题
    wscolsList: [{ wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }],
    endTime: '',
    startTime: '',
  });
  // 表格的 ref Dom名称
  let { tableData, loading } = toRefs(data);
  const getCode = async () => {
    if (startTime != null && startTime != '') {
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      const sTime = moment(startTime).format('YYYY-MM-DD');
      const eTime = moment(endTime).format('YYYY-MM-DD');
      const start: any = dayjs(sTime);
      const end: any = dayjs(eTime);
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      startDate.value = start;
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      endDate.value = end;
    }
  };
  async function getData() {
    if (startDate.value == null) {
      let currentDate = moment().format('YYYY-MM-DD');
      const start: any = dayjs('2024-01-01');
      const end: any = dayjs(currentDate);
      startDate.value = start;
      endDate.value = end;
      getTime();
    }
    let params = {
      pageIndex: pageIndex.value,
      pageSize: pageSize.value,
      startTime: moment(startDate.value.$d).format('YYYY-MM-DD'),
      endtime: moment(endDate.value.$d).format('YYYY-MM-DD'),
      cked: checked.value,
      roletype: role_type.value,
      txtKeyWord: nickname.value,
    };
    console.log(strXzqdm.value);
    if (strXzqdm.value != undefined && strXzqdm.value != null && strXzqdm.value.length > 0) {
      params.xzqdm = strXzqdm.value[0] + '';
      params.towndm = strXzqdm.value[1];
      params.villagedm = strXzqdm.value[2];
    }
    console.log('@市级参数', params);
    loading.value = true;
    let res: any = await getUserByList(params);
    console.log('@res--工作进入汇总表', checked.value);
    data.tableData = [...res.items];
    loading.value = false;
    total.value = res.total;
  }

  const getDetailData = async (row: any) => {
    const title = row.town_village + '【' + row.nickname + '】核查情况';
    let params = {
      startTime: moment(startDate.value.$d).format('YYYY-MM-DD'),
      endTime: moment(endDate.value.$d).format('YYYY-MM-DD'),
      nickname: row.nickname + '',
      xzqdm: row.xzqdm,
      currentTitle: title,
      roletype: role_type.value,
    };
    router.push({
      path: '/utils/hcmxdetail',
      query: params,
    });
  };
  function getTime() {
    data.startTime = moment(startDate.value.$d).format('YYYY-MM-DD');
    data.endTime = moment(endDate.value.$d).format('YYYY-MM-DD');
    console.log('@查询参数 -- 开始时间', data.startTime);
    console.log('@查询参数 -- 结束时间', data.endTime);
  }

  function searchBtn() {
    getTime();
    loading.value = true;
    pageIndex.value=1;
    pageSize.value=15;
    getData();
  }
  function getUserInfo() {
    const userStore = useUserStore();
    userInfo.value = userStore?.getUserInfo;
  }
  const displayColumns = computed(() => {
    return data.tableColumns;
  });
  async function getRegionData() {
    let res: any = await getRegion();
    XzqdmList.value = res;
  }
  const onShowSizeChange = () => {
    // antDesign  自动给  pageIndex 和 pageSize 赋值
    //  pageIndex.value = pageIndex;
    //  pageSize.value = pageSize;
    // console.log('@pageIndex,pageSize', pageIndex, pageSize);
  };

  
  const getTableHeight = () => {
    setTimeout(() => {
      detailTableHeight.value = window.innerHeight - 182;
      tableHeight.value = window.innerHeight - 292;
    });
  };
  watch(pageSize, () => {
    console.log('pageSize', pageSize.value);
    getData();
  });
  watch(pageIndex, () => {
    console.log('current', pageIndex.value);
    getData();
  });
  onBeforeMount(() => {
    getUserInfo();
  });
  onMounted(() => {
    console.log('******基本信息统计初始化******');
    getRegionData();
    getCode();
    getData();
    getTableHeight();
  });
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  #map {
    height: calc(100vh - 140px);
  }

  .x-houseMng-search {
    z-index: 100;
    margin: 6px;
    position: absolute;
  }

  .root-house-mng-main {
    margin: 6px;
  }

  .x-village-tabs {
    //z-index: 100;
    //position: absolute;
    width: 60vw;
    margin-top: 6px;
    margin-left: 40px;
    //background-color: rgba(34, 34, 34, 0.6);
    :deep(.ant-form) {
      margin-top: 6px;
    }
  }
</style>

